<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script type="text/javascript">
     /**
      * 对正则表达式替换的更深入的一种用法，自定义替换函数，
      * 我们常用的替换方式无非是固定替换的内容，或者自己记录替换的内容，有没有什么方法可以实现使用匹配的内容进行替换呢?
      * 当然是有的，这里我们使用了replace的回调函数，参数分别是匹配到的内容，和捕获的值，和返回值的数组一样，就是匹配到的内容，第一个捕获，第二个捕获，
      * 当然这里也得有需要注意的地方，如果单纯的将-([a-z])替换为捕获的内容那 -webkit-border-image怎么办呢，w需要小写而不是大写对吧，
      * 所以我们需要加一个可存在可不存在的字母[a-z]?，那在回调函数怎么判断这两种情况呢，看all的长度喽，
      * 如果存在的话则有三个字字母eg. a-b需替换为第一个捕获的内容加上转大写的第二个的内容
      * 如果不存在的话则直接返回转大写第二个捕获的内容
      */
      const cssStyle2DomStyle = (sName) =>
        sName.replace(/([a-z]?)-([a-z])/g, (all, letter1,letter2) => all.length==2?letter2:letter1+letter2.toUpperCase());

      console.log(cssStyle2DomStyle("font-size"));
      console.log(cssStyle2DomStyle("-webkit-background-composite"));
    </script>
  </body>
</html>


